<template>
  <!-- 我的课程 -->
  <div class="myCourse">
    <ul class="mycourse-list">
      <li
        class="mycourse-item"
        v-for="item in courseList"
        :key="item.id"
        @click="toDetails(item)"
      >
        <div
          class="mycourse-img"
          :style="`background-image:url(${item.courseCover})`"
        ></div>
        <div class="mycourse-info">
          <p class="text">{{ item.cousrName }}</p>
          <Progress :percent="Number(item.loading) * 100" />
        </div>
      </li>
    </ul>
    <empty v-if="courseList.length === 0" />
    <div class="page">
      <Page
        :total="total"
        @on-change="currentHandle"
        @on-page-size-change="sizeChange"
        :page-size="params.rows"
      />
    </div>
  </div>
</template>
<script>
import { getCourseList } from "@/api/myAttention";

export default {
  data() {
    return {
      total: 0,
      params: {
        page: 1,
        rows: 10,
      },
      courseList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    sizeChange(size) {
      this.page.rows = size;
      this.getList();
    },
    //获取当前页码
    currentHandle(current) {
      this.params.page = current;
      this.getList();
    },
    toDetails(item) {
      this.$router.push({
        path: "/courseDetail",
        query: {
          isCharge: item.isCharge ? "1" : "0", //默认已购买
          payStatus: item.payStatus,
          id: item.courseSeriesId,
          name: item.cousrName,
        },
      });
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      sessionStorage.setItem("name", "courseDetail");
    },
    //获取专家列表
    getList() {
      getCourseList(this.params).then((res) => {
        const {
          code,
          result: { total, records },
        } = res;
        if (code == 200) {
          this.total = Number(total);
          this.courseList = records || [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myCourse {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  position: absolute;
  top: calc(288 / 1920 * 100vw);
  left: calc(240 / 1920 * 100vw);
  padding: calc(30 / 1920 * 100vw) calc(40 / 1920 * 100vw) calc(40 / 1920 * 100vw);
  .mycourse-list {
    display: flex;
    flex-wrap: wrap;
    .mycourse-item {
      width: 19%;
      margin: 0 1% 48px 0;
      background: #ffffff;
      box-shadow: 0px 4px 10px 0px #efeded;
      border-radius: 5px;
      .mycourse-img {
        height: 170px;
        overflow: hidden;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        background-size: cover;
      }
      .mycourse-info {
        padding: 15px 10px;
        .text {
          margin-bottom: 10px;
          cursor: pointer;
        }
      }
    }
  }
  .page {
    position: absolute;
    right: calc(40 / 1920 * 100vw);
    bottom: calc(24 / 1920 * 100vw);
  }
  .ivu-progress {
    display: flex;
  }
}
</style>
